<template>
    <div>
        <!-- 基础属性-->
        <el-row :gutter="20">
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <Category @tree-node-click="treeNodeClick"></Category>
                </div>
            </el-col>
            <el-col :span="19">
                <div class="grid-content bg-purple">
                    <!-- 搜索区 -->
                    <!-- @keyup.enter.native="getDataList()" 监听按下回车搜索数据 -->
                    <el-form :inline="true" :model="formInline" class="demo-form-inline"
                        @keyup.enter.native="getDataList()">
                        <el-form-item>
                            <el-input v-model="formInline.key" placeholder="参数名"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button @click="getDataList">查询</el-button>
                            <el-button v-if="isAuth('product:attr:save')" type="primary"
                                @click="addOrUpdateHandle()">新增</el-button>
                            <el-button v-if="isAuth('product:attr:delete')" type="danger" @click="onDelete"
                                :disabled="multipleSelection.length <= 0">批量删除</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 数据区 -->
                    <el-table ref="multipleTable" :data="tableData" v-loading="dataListLoading" border
                        tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="attr_id" label="属性ID" header-align="center" align="center" width="80">
                        </el-table-column>
                        <el-table-column prop="attr_name" label="属性名" header-align="center" align="center" width="80">
                        </el-table-column>
                        <el-table-column v-if="attrtype == 1" header-align="center" align="center" label="可检索"
                            prop="search_type" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <i class="el-icon-success" v-if="scope.row.search_type == 1"></i>
                                <i class="el-icon-error" v-else></i>
                            </template>
                        </el-table-column>
                        <el-table-column prop="icon" label="属性图标" header-align="center" align="center" width="80"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="value_select" label="可选值" header-align="center" align="center"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <span v-for="(i, index) in scope.row.value_select.split(';')" :key="index">{{ i
                                            }}<br /></span>
                                    </div>
                                    <el-tag>{{ scope.row.value_select.split(";")[0] + " ..." }}</el-tag>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column prop="value_type" label="属性类型" header-align="center" align="center" width="80"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.value_type === 0">单选</el-tag>
                                <el-tag v-else>多选</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="enable" label="启用状态" header-align="center" align="center" width="80"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                <i class="el-icon-success" v-if="scope.row.enable == 1"></i>
                                <i class="el-icon-error" v-else></i>
                            </template>
                        </el-table-column>
                        <el-table-column prop="show_desc" label="是否快速展示" header-align="center" align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="catelog_name" label="所属分类名" header-align="center" align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="attr_group_name" label="所属分组名" header-align="center" align="center"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small"
                                    @click="queryRelation(scope.row.attr_id)">级联查询</el-button>
                                <el-button type="text" size="small"
                                    @click="addOrUpdateHandle(scope.row.attr_id)">修改</el-button>
                                <el-button type="text" size="small" @click="onDelete(scope.row.attr_id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                        :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                        :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <!-- 组件emit的事件 刷新数据 -->
        <attr-add-or-update @refreshDataList="getDataList" :type="attrtype" ref="attrAddOrUpdate"
            v-if="addAndUpdateVisible"></attr-add-or-update>
    </div>
</template>

<script>
import Category from '../common/category.vue'
import AttrAddOrUpdate from './attr-add-and-update.vue';
export default {
    props: { //自定义属性值
        attrtype: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {

            tableData: [],
            formInline: {
                key: '',
                catelogId: 0
            },
            pageIndex: 0,
            pageSize: 0,
            totalPage: 0,
            addAndUpdateVisible: false, //是否显示新增或修改弹窗ttrtype
            multipleSelection: [], //复选框选中的值
            dataListLoading: false,

        }
    },
    components: {
        Category, AttrAddOrUpdate
    },
    created() {
        this.getDataList()
    },
    methods: {
        // 树节点被点击触发的方法  
        treeNodeClick(data, node, component) {
            console.log("节点被点击", data, node, component);
            console.log("被点击的菜单id", data.catId);
            //判断当前点的节点的层级 如果是三层级别才可以查询分组 node 里面包含
            if (node.data.catLevel === 3) {
                this.formInline.catelogId = data.catId
                this.getDataList()
                this.formInline.catelogId = 0

            } else {
                this.$message({
                    message: '请点击三级分类！',
                    type: 'warning',
                    duration: 1500
                });
            }

        },
        //新增或修改
        addOrUpdateHandle(id) {
            console.log("传去增加或修改页面的id", id);
            this.addAndUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.attrAddOrUpdate.init(id)
            })

        },
        //查询规格属性分页列表
        getDataList() {
            this.dataListLoading = true;
            var data = {
                'page': this.pageIndex,
                'pageSize': this.pageSize,
                'key': this.formInline.key,
                'catelogId': this.formInline.catelogId,
                'attrType': this.attrtype
            }
            console.log("传到后端的查询条件--", data);

            this.$http({
                url: this.$http.adornUrl('/product/attr/list'),
                method: 'post',
                data: this.$http.adornData(data, false)
            }).then(({ data }) => {
                if (data.code === 200) {
                    console.log("条件查询结果----", data);
                    this.tableData = data.data.list
                    this.totalPage = data.data.totalCount
                } else {
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false;

            })
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
        //监听多选框
        handleSelectionChange(val) {
            this.multipleSelection = val //
        },
        //多选框传来的数据
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        }
    }


}

</script>
<style scoped></style>
